<template>
  <view
    :class="maskVisible ? 'mask' : 'mask_down'"
    :style="showpop ? '' : { visibility: 'hidden' }"
  >
    <view :class="maskVisible ? 'pop' : 'pop_down'">
      <view class="headers">
        <view @tap="cancel">取消</view>
        <view @tap="ok">确定</view>
      </view>
      <view class="bodys">
        <view
          :class="orgStyle == 1 ? 'startTime orgTime' : 'startTime'"
          @tap="changeStart"
          >{{ startTime }}</view
        >
        至
        <view
          :class="orgStyle == 2 ? 'endTime orgTime' : 'endTime'"
          @tap="changeEnd"
          >{{ endTime }}</view
        >
      </view>
      <view class="torst">最长可查找时间跨度一年的交易</view>
      <view> </view>
      <picker-view
        class="pick-view"
        indicator-style="height: 50px;"
        :value="selectIndexList"
        @change="changeHandel"
        :immediateChange="true"
      >
        <picker-view-column className="picker-view-column">
          <view
            v-for="(item, index) in yearList"
            :key="index"
            class="pick-view-column-item"
            >{{ item }}</view
          >
        </picker-view-column>
        <picker-view-column className="picker-view-column">
          <view
            v-for="(item, index) in monthLsit"
            :key="index"
            class="pick-view-column-item"
            >{{ item }}</view
          >
        </picker-view-column>
        <picker-view-column className="picker-view-column">
          <view
            v-for="(item, index) in dayList"
            :key="index"
            class="pick-view-column-item"
            >{{ item }}</view
          >
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>
  <script>
import { reactive, ref, toRefs } from "vue";
import moment from "moment";
import Taro from "@tarojs/taro";
import {
  getPickerViewList,
  getDate,
  getArrWithTime,
  getDayList,
} from "./utils";
import "./index.less";
export default {
  // props: ["maskVisible", "showpop"],
  props:{
    maskVisible:Boolean,
    showpop:Boolean
  },
  setup(props, context) {
    let state = reactive({
      yearList: [], //年 -下拉
      monthLsit: [], //月 -下拉
      dayList: [], //日 -下拉
      selectIndexList: [1, 1, 1], //PickerViewColumn选择的索引
      fmtInitValue: "", //初始值
      current: "", //当前选择的数据
      hasChange: false, //是否更改
      year: "", //时间值
      month: "",
      day: "",
      changeDay: "",
      orgStyle: 0,
      startTime: moment().subtract(1, "year").format("YYYY-MM-DD"),
      endTime: moment(new Date()).format("YYYY-MM-DD"),
      nowMonth: new Date().getMonth(),
      nowDay: new Date().getDate(),
    });
    const { current, fmtInitValue } = state;
    const selectIndexList = [];
    const arr = getArrWithTime(current || fmtInitValue || getDate()); //优先当前选择的值，其次默认值，其次当前值
    const { yearLists, monthLsits, dayLists } = getPickerViewList();
    const [year, month, day] = arr;
    //根据arr  数据索引
    selectIndexList[0] = yearLists.indexOf(arr[0] + "年");
    selectIndexList[1] = monthLsits.indexOf(arr[1] + "月");
    selectIndexList[2] = dayLists.indexOf(arr[2] + "日");
    (state.selectIndexList = selectIndexList),
      (state.yearList = yearLists),
      (state.monthLsit = monthLsits),
      (state.dayList = dayLists),
      (state.year = year),
      (state.month = month),
      (state.day = day);
    // // 切换
    let changeHandel = (e) => {
      const selectIndexList = e.detail.value;
      const [yearIndex, monthIndex, dayIndex] = selectIndexList;
      const { yearList, monthLsit, dayList } = state;
      const yearStr = yearList[yearIndex];
      const monthStr = monthLsit[monthIndex];
      const dayStr = dayList[dayIndex];
      const year = Number(yearStr.substr(0, yearStr.length - 1));
      const month = Number(monthStr.substr(0, monthStr.length - 1));
      const day = Number(dayStr.substr(0, dayStr.length - 1));
      let numArray = [];
      for (let i = 1; i <= 12; i++) {
        numArray.push(i + "月");
      }
      // 更新年、天数
      const newDayList = getDayList(year, month);
      if (selectIndexList[0] == 0) {
        let month = state.nowMonth;
        let day = state.nowDay - 1;
        let monthlist = numArray.filter((item) => {
          return Number(item.substr(0, item.length - 1)) >= month + 1;
        });
        if (selectIndexList[1] == 0) {
          let daylist = newDayList.filter((item) => {
            return Number(item.substr(0, item.length - 1)) >= day + 1;
          });
          state.dayList = daylist;
        } else {
          state.dayList = newDayList;
        }
        state.monthLsit = monthlist;
      } else {
        let month = state.nowMonth;
        let day = state.nowDay - 1;
        let monthlist = numArray.filter((item) => {
          return Number(item.substr(0, item.length - 1)) <= month + 1;
        });
        if (selectIndexList[1] == monthlist.length - 1) {
          let daylist = newDayList.filter((item) => {
            return Number(item.substr(0, item.length - 1)) <= day + 1;
          });
          state.dayList = daylist;
        } else {
          state.dayList = newDayList;
        }
        state.monthLsit = monthlist;
      }
      let months = "";
      let days = "";
      if (month >= 10) {
        months = month;
      } else {
        months = "0" + month;
      }
      if (day >= 10) {
        days = day;
      } else {
        days = "0" + day;
      }
      let changeDay = year + "-" + months + "-" + days;
      (state.year = year),
        (state.month = month),
        (state.day = day),
        (state.hasChange = true),
        (state.changeDay = changeDay);
      state.selectIndexList = selectIndexList;
      if (state.orgStyle == 1) {
        state.startTime = changeDay;
      } else if (state.orgStyle == 2) {
        state.endTime = changeDay;
      }
    };
    // // 选择开始时间
    let changeStart = () => {
      let month = state.nowMonth + 1;
      let day = state.nowDay;

      let month_index = 0;
      let day_index = 0;
      state.monthLsit.forEach((item, index) => {
        if (Number(item.substr(0, item.length - 1)) == month) {
          month_index = index;
        }
      });
      state.dayList.forEach((item, index) => {
        if (Number(item.substr(0, item.length - 1)) == day) {
          day_index = index;
        }
      });
      (state.orgStyle = 1),
        (state.selectIndexList = [0, month_index, day_index]);
    };
    // // 选择结束时间
    let changeEnd = () => {
      let month = state.nowMonth + 1;
      let day = state.nowDay;
      let month_index = 0;
      let day_index = 0;
      state.monthLsit.forEach((item, index) => {
        if (Number(item.substr(0, item.length - 1)) == month) {
          month_index = index;
        }
      });
      state.dayList.forEach((item, index) => {
        if (Number(item.substr(0, item.length - 1)) == day) {
          day_index = index;
        }
      });
      (state.orgStyle = 2),
        (state.selectIndexList = [1, month_index, day_index]);
    };
    let ok = () => {
      let stateTime = Date.parse(new Date(state.startTime));
      let endTime = Date.parse(new Date(state.endTime));
      if (stateTime > endTime) {
        return Taro.showToast({
          title: "请正确输入日期",
          icon: "error",
        });
      } else {
        state.orgStyle = 0;
        context.emit("okVisible", {
          startTime: state.startTime,
          endTime: state.endTime,
        });
      }
    };
    let cancel = () => {
      state.orgStyle = 0;
      context.emit("cancelVisible", false);
    };
    return {
      ...toRefs(state),
      changeHandel,
      changeStart,
      changeEnd,
      ok,
      cancel,
    };
  },
};
</script>